<template>
    <el-checkbox v-model="row[column.property]"
                 :disabled="disabled"
                 :true-label="trueLabel"
                 :false-label="falseLabel"
                 :checked="checked"
                 :indeterminate="indeterminate"
                 @change.native="handleChange"
                 @keyup.enter.native="handleEnter"
    ></el-checkbox>
</template>

<script>
export default {
    name: "CustomCheckbox",
    props: {
        params: Object,
        trueLabel: {
            type: Number,
            default: 1
        },
        falseLabel: {
            type: Number,
            default: 0
        },
        checked: {
            type: Boolean,
            default: false,
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        indeterminateField: {
            type: String,
            default: 'indeterminate',
        },
    },
    data() {
        return {
            loading: false,
            optionsList: [],
            row: {},
            column: {},
        };
    },
    computed: {
        indeterminate() {
            const { row } = this.params;
            return row[this.indeterminateField];
        },
    },
    created() {
        this.init();
        document.onkeydown = () => {
            let key = window.keyCode
            if (key === 13) {
                this.handleEnter();
            }
        }
    },
    methods: {
        async init() {
            const { row, column } = this.params;
            this.row = row;
            this.column = column;
        },
        handleChange() {
            const { row, column } = this;
            this.$emit('change', row[column.property]);
        },
        handleEnter() {
            const { row, column } = this;
            this.$emit('enter', row[column.property]);
        },
    },
}
</script>

<style scoped>

</style>
